/* components */
import { RoleViewUserContent, RoleViewAuthView } from '@src/modules/account/role/component'
/* enum */
import ComponentNameEnum from '@model/enum/ComponentNameEnum'
/* hooks */
import { useStoreCurrentSelectRole } from '@src/modules/account/role/store/hooks'
/* model */
import { RoleViewUserTab, RoleViewFeatureAuthTab } from '@src/modules/account/role/model'
/* scss */
import '@src/modules/account/role/component/RoleViewTabs/index.scss'
/* vue */
import { ComponentInstance, computed, ComputedRef, defineComponent, Ref, ref } from 'vue'

export type RoleViewTabsForViewProps = {

}

export interface RoleViewTabsForViewSetupState {
  activeTab: ComputedRef<string>;
}

export enum RoleViewTabsForViewEventEnum {
  Input = 'input',
  UpdateActive = 'update:active'
}

export type RoleViewTabsForViewEmitsOptions = {
  input: () => void;
}

export type RoleViewTabsForViewInstance = ComponentInstance & RoleViewTabsForViewSetupState
export type RoleViewTabsForViewVM = RoleViewTabsForViewSetupState & RoleViewTabsForViewProps & ComponentInstance

export type SettingCompanyPaymentTab = {
  show: boolean;
  title: string;
  name: string;
}

export default defineComponent({
  name: ComponentNameEnum.RoleViewTabsForView,
  emits: [RoleViewTabsForViewEventEnum.Input, RoleViewTabsForViewEventEnum.UpdateActive],
  props: {
    
  },
  setup(props: RoleViewTabsForViewProps, { slots, emit }) {
    
    const { currentSelectRole } = useStoreCurrentSelectRole()
    
    const currentTabName: Ref<string> = ref(RoleViewUserTab.name)
    
    const activeTab: ComputedRef<string> = computed(() => {
      return RoleViewUserTab.name
    })
    
    const classNames = computed(() => {
      
      let classNames: string[] = [ComponentNameEnum.RoleViewTabsForView]
      
      if (currentTabName.value === RoleViewUserTab.name) {
        classNames.push(RoleViewUserTab.className)
      }
      
      if (currentTabName.value === RoleViewFeatureAuthTab.name) {
        classNames.push(RoleViewFeatureAuthTab.className)
      }
      
      return classNames
    })
    
    function onCurrentTabNameChangeHandler(value: string) {
      currentTabName.value = value
    }
    
    return {
      activeTab,
      classNames,
      currentSelectRole,
      onCurrentTabNameChangeHandler
    }
  },
  render() {
    return (
      <div class={this.classNames}>
        
        <el-tabs activeName={this.activeTab} onInput={this.onCurrentTabNameChangeHandler}>
          
          <el-tab-pane 
            key={RoleViewUserTab.key} 
            label={RoleViewUserTab.name} 
            name={RoleViewUserTab.name}
          >
            <RoleViewUserContent role={this.currentSelectRole} />
          </el-tab-pane>
          
          <el-tab-pane 
            key={RoleViewFeatureAuthTab.key} 
            label={RoleViewFeatureAuthTab.name} 
            name={RoleViewFeatureAuthTab.name}
          >
            <RoleViewAuthView disabled />
          </el-tab-pane>
          
        </el-tabs>
        
      </div>
    ) as any
  }
}) as any
